<template>
	<view class="">
		<view class="header-address">
			<!-- <view class="address-item" @click="toAddress">
				<view class="address-left">
					{{ selectedCity }}
				</view>
				<view class="address-right">
					<image class="address-img" src="/static/img/arrowdown.png" mode=""></image>
				</view>
			</view> -->
			<!-- <view class="" @click="toSales">
				销量榜
			</view> -->
			<!-- <view class="search-container">
				<view class="search-box">
					<image class="img" src="/static/img/search-icon2.png"></image>
					<view class="search-text">输入商家名，品类或商圈</view>
				</view>
			</view> -->
		</view>
		<view class="category-container">

			<!-- 左侧分类菜单 -->
			<scroll-view scroll-y class="category-menu">
				<view class="menu-item" v-for="(item, index) in categories" :key="index"
					:class="{ active: currentIndex === index }"
					:style="{ color: currentIndex === index ? t('color2') : '#333' }" @tap="switchCategory(index)">
					<view class="before" :style="{ background: t('color2') }"></view>
					{{ item.name }}
				</view>
			</scroll-view>

			<!-- 右侧分类内容 -->
			<scroll-view scroll-y class="category-content">
				<view class="content-wrapper">
					<!-- 分类广告图 -->
					<view class="category-banner-box" @click="toPath(currentCategory.path)">
						<image v-if="currentCategory.banner" :src="currentCategory.banner" class="category-banner" />
					</view>

					<view v-if="currentIndex == 0">
						<movie></movie>
					</view>

					<view v-if="currentIndex == 1">
						<cvideo></cvideo>
					</view>
					<!-- 分类项目列表 -->
					<!-- <view class="category-list">
						<view class="category-group" v-for="(group, groupIndex) in currentCategory.subCategories"
							:key="groupIndex">
							<view class="group-title">{{ group.title }}</view>
							<view class="group-content">
								<view class="category-item" v-for="(item, itemIndex) in group.items" :key="itemIndex"
									@tap="onItemClick(item)">
									<image :src="item.icon" mode="aspectFit" class="item-icon" />
									<text class="item-name">{{ item.name }}</text>
								</view>
							</view>
						</view>
					</view> -->
					<!-- <view class="list">
						<view class="list-item" v-for="(item, index) in 1" :key="index">
							<view class="list-item-img">
								<image :src="static_url + '/static/img/ag_poster.png'" class="" mode=""></image>
							</view>
							<view class="list-right">
								<view class="list-right-title">
									优先果园（切果/水果拼盘/整果）
								</view>
								<view class="list-right-pick">
									<view class="">
										4.7
										<text class="pick-con">|</text>
										月售3000+
									</view>
									<view class="list-right-time">
										30分钟
									</view>
								</view>
								<view class="price">
									3.24折
								</view>
							</view>
						</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
var app = getApp();
import movie from '../components/movie.vue';
import cvideo from '../components/cvideo.vue';
export default {
	name: 'CategoryList',
	data() {
		return {
			selectedCity: '获取定位', // 用于存储选择的城市
			currentIndex: 0,
			categories: [

			]
		}
	},
	computed: {
		currentCategory() {
			return this.categories[this.currentIndex]
		}
	},
	onLoad() {
		this.getdata();
		this.getCurrentLocation();
	},

	onUnload() {
		// 页面卸载时移除事件监听
		uni.$off('citySelected', this.updateSelectedCity);
	},
	components: {
		movie,
		cvideo
	},
	methods: {
		getdata() {
			var that = this;
			app.get('index/getEntranceSet', {
				type: 1
			}, function (res) {
				if (res.status == 1) {

					if (res.data.length > 0) {
						that.categories = res.data
					} else {
						app.error('暂无数据')
					}
				} else {
					app.error(res.msg)
				}

			});
		},
		toPath(uri) {
			if (uri) {
				uni.navigateTo({
					url: uri
				})
			} else {
				app.error("未获取路径")
			}
		},
		// 更新选中的城市

		updateSelectedCity(city) {

			this.selectedCity = city.name;

		},
		// 获取当前定位地址
		getCurrentLocation() {
			uni.getLocation({
				type: 'wgs84', // 默认是 wgs84 类型，适合用于 GPS 定位
				success: (res) => {
					const latitude = res.latitude; // 纬度
					const longitude = res.longitude; // 经度
					this.getAreaByLocation(latitude, longitude)
					// this.getCityByLocation(latitude, longitude); // 使用经纬度获取城市名
					console.log(latitude, longitude, '当前经纬度');
				},
				fail: (err) => {
					console.log('获取定位失败:', err);
					this.selectedCity = '重新定位'; // 定位失败时显示的提示
				}
			});
		},
		getAreaByLocation(latitude, longitude) {
			app.get('address/getAreaByLocation', {
				latitude: latitude,
				longitude: longitude,
				type: 0,
			}, (res) => {
				if (res.status == 1) {
					const result = res;
					const city = `${result.province}/${result.city}/${result.district}`
					uni.setStorageSync('latitude', latitude)
					uni.setStorageSync('longitude', longitude)
					uni.setStorageSync('city', city)
					uni.setStorageSync('cityName', result.city)
					uni.setStorageSync('areaName', result.district)

				} else {
					app.error(res.msg)
				}

			});
		},

		//切换城市
		toAddress() {
			uni.navigateTo({
				url: './city'
			})
		},
		toSales() {
			uni.navigateTo({
				url: '../../pagesExt/sales/index'
			})
		},
		// 切换分类
		switchCategory(index) {
			this.currentIndex = index
		},

		// 点击具体分类项
		onItemClick(item) {
			let url = JSON.parse(JSON.stringify(item))
			let url_path = url.path
			app.goto(url_path)
		}
	}
}
</script>

<style lang="scss" scoped>
.header-address {
	display: flex;
	align-items: center;
}

.address-item {
	display: flex;
	flex-shrink: 0;
	color: #333;
	padding: 0 10rpx;
}

.address-left {
	margin-right: 10rpx;
}

.address-img {
	width: 40rpx;
	height: 40rpx;
}

.container {
	width: 100%;
	height: 100%;
	max-width: 640px;
	color: #939393;
	display: flex;
	flex-direction: column
}

.search-container {
	width: 100%;
	height: 94rpx;
	padding: 16rpx 23rpx 14rpx 23rpx;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #f5f5f5
}

.search-box {
	display: flex;
	align-items: center;
	height: 70rpx;
	border-radius: 16rpx;
	border: 0;
	background-color: #fff;
	flex: 1;
}

.search-box .img {
	width: 46rpx;
	height: 44rpx;
	margin-right: 10rpx;
	margin-left: 30rpx
}

.search-box .search-text {
	font-size: 24rpx;
	color: #939393;
	width: 100%;
}

.category-container {
	display: flex;
	height: 100vh;
	background: #fff;

	.category-menu {
		width: 160rpx;
		height: 100%;
		background: #f7f8fa;
		flex-shrink: 0;

		.menu-item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #333;
			position: relative;

			.before {
				display: none;
				position: absolute;
				top: 50%;

				margin-top: -12rpx;
				left: 0;
				height: 24rpx;
				border-radius: 4rpx;
				width: 8rpx
			}


			&.active {
				// background: #fff;
				// color: rgb(235, 84, 77);
				// font-weight: bold;

				.before {
					display: block
				}

				// &::before {
				// content: '';
				// position: absolute;
				// left: 0;
				// top: 50%;
				// transform: translateY(-50%);
				// width: 6rpx;
				// height: 32rpx;
				// background: rgb(235, 84, 77);
				// }
			}
		}
	}

	.category-content {
		flex: 1;
		height: 100%;

		.content-wrapper {
			padding: 20rpx;

			.category-banner-box {
				width: 100%;
				height: 200rpx;
				margin-bottom: 30rpx;

				.category-banner {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;

				}
			}


			.category-list {
				.category-group {
					margin-bottom: 30rpx;

					.group-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 20rpx;
					}

					.group-content {
						display: flex;
						flex-wrap: wrap;

						.category-item {
							width: 33.33%;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 20rpx 0;

							.item-icon {
								width: 80rpx;
								height: 80rpx;
								margin-bottom: 10rpx;
							}

							.item-name {
								font-size: 24rpx;
								color: #666;
							}
						}
					}
				}
			}
		}
	}

	.list-item {
		display: flex;
		margin-top: 30rpx;
	}

	.list-item-img {
		width: 160rpx;
		height: 160rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.list-item-img image {
		width: 100%;
		height: 100%;
	}

	.list-right {
		margin-left: 20rpx;
	}

	.list-right-title {
		color: #000000;
	}

	.list-right-pick {
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;
	}

	.pick-con {
		margin: 0 10rpx;
	}

	.price {
		color: #ff2600de;
	}
}

/* 如果使用字体图标，需要引入字体文件 */
@font-face {
	font-family: 'iconfont';
	src: url('//at.alicdn.com/t/font_xxxx.woff2') format('woff2');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
</style>
